<!--模块管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="规则名称:">
        <el-input
          v-model="searchKey.rulename"
          clearable
          placeholder="请输入规则名称"
          @keyup.enter.native="onsearch"
        />
      </el-form-item>
      <el-form-item label="地点:">
        <el-input
          v-model="searchKey.devicelist"
          clearable
          placeholder="请输入地点"
          @keyup.enter.native="onsearch"
        />
      </el-form-item>
      <el-form-item label="交易时间:">
        <el-date-picker
          v-model="searchKey.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="规则名称:">
        <el-input
          v-model="searchKey.opname"
          clearable
          placeholder="操作者姓名"
          @keyup.enter.native="onsearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addChange">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table
        ref="table"
        :data="searchData"
        v-loading="page.tableLoading"
        center
        stripe
        border
      >
        <el-table-column
          prop="rulename"
          label="规则名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="状态"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="props">
            {{ props.row.status == 1 ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="schoolid"
          label="学校编码"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="username"
          label="学校名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="devicelist"
          label="地点"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="applyobject"
          label="应用对象"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="applymode"
          label="有效方式"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="props">
            {{ props.row.status == 1 ? "长久有效" : "时段有效" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="startdate"
          label="开始时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="enddate"
          label="结束时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="timesectionlist"
          label="有效时段信息"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="opid"
          label="操作者"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="opname"
          label="操作者姓名"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="uptime"
          label="修改时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createtime"
          label="创建时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column label="操作" width="250">
          <template slot-scope="props">
            <el-button
              type="success"
              size="small"
              round
              @click="editInfo(props.row)"
              >修 改</el-button
            >
            <el-button
              type="danger"
              size="small"
              round
              @click="delInfo(props.row)"
              >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
    <!-- 添加 修改 信息的弹框 -->
    <el-dialog
      :title="!addModel.item.agentid ? '新增' : '修改'"
      :visible.sync="addModel.flag"
      width="750px"
      :close-on-click-modal="false"
    >
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display: flex">
          <el-form-item label="	规则名称:" required>
            <el-input
              v-model="addModel.item.rulename"
              placeholder="请输入	规则名称"
            />
          </el-form-item>
          <el-form-item label="学校名称:" required>
            <el-select
              v-model="addModel.item.schoolname"
              filterable
              value-key="schoolid"
              placeholder="请选择学校名称"
              @change="schoolChange($event)"
              :disabled="addModel.item.gradeid ? true : false"
            >
              <el-option
                v-for="item in schoolList"
                :key="item.schoolid"
                :label="item.schoolname"
                :value="{
                  schoolid: item.schoolid,
                  schoolname: item.schoolname,
                }"
              >
              </el-option>
            </el-select>
            <!-- <el-input v-model="addModel.item.schoolid" placeholder="请输入学校名称" /> -->
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="代理商名称:" required>
            <el-input
              v-model="addModel.item.agentname"
              placeholder="请输入代理商名称"
            />
          </el-form-item>
          <el-form-item label="代理区域代码:" required>
            <el-input
              v-model="addModel.item.areacode"
              placeholder="请输入代理区域代码"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="应用道闸设备:" required>
            <el-input
              v-model="addModel.item.devicelist"
              placeholder="请输入应用道闸设备"
            />
          </el-form-item>

          <el-form-item label="代理商类型" required>
            <el-select
              v-model="addModel.item.applymode"
              placeholder="有效方式 "
            >
              <el-option label="有效方式 " :value="1" />
              <el-option label="时段有效" :value="2" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="有效开始日期:" required>
            <el-date-picker
              v-model="addModel.item.startdate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="有效结束日期:" required>
            <el-date-picker
              v-model="addModel.item.enddate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="应用对象:">
            <el-select
              v-model="addModel.item.usertype"
              filterable
              value-key="schoolid"
              placeholder="请选择应用对象"
            >
              <el-option label="学生" :value="1" />
              <el-option label="教师" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" required>
            <el-radio-group v-model="addModel.item.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div style="border-top: 1px solid #eee; margin-bottom: 10px"></div>
        <div style="margin-bottom: 20px">
          <el-checkbox
            style="margin-left: 60px"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            style="margin-left: 60px"
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{
              city
            }}</el-checkbox>
          </el-checkbox-group>
          <div style="margin-top: 20px; display: flex">
            <el-form-item label="有效时段信息:">
              <el-time-picker
                is-range
                v-model="addModel.item.time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
            <span class="addbtn" @click="addBtnTime">+</span>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//
// import {
//   getagentlist,
//   addagent,
//   editagent,
//   delagent

// } from '@/api/basicInfo/index'
import { getschoollist } from "@/api/educationalManagement/index";
import Pagination from "@/components/Pagination"; // 分页
import { getMessage } from "@/utils/pageUtil.js";
import {
  getGatebarrierinfolist,
  deletegatebarrierinfo,
} from "@/api/throughManagement/index";
const cityOptions = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const defaultAddItem = {
  rulename: "",
  status: null, // 1:启用 0:禁用
  schoolid: null,
  schoolname: "",
  devicelist: "",
  applyobject: null,
  applymode: null,
  startdate: null,
  enddate: null,
  timesectionlist: null,
  time: null,
};
export default {
  name: "AgentManagement",
  components: { Pagination },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,
      searchKey: {
        time: "",
        schoolname: "", // 姓名
        devicelist: "",
        startdate: null,
        enddate: null,
        opname: "",
      },
      searchData: [], // 搜索的值
      schoolList: [],
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0, // 总页数
      },
      addModel: {
        flag: false,
        item: defaultAddItem,
      },
    };
  },
  mounted() {
    this.onsearch();
    this.getSchoolList();
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    getSchoolList() {
      var params = {};
      var that = this;
      params.pageindex = 1; // 当前页数
      params.pagesize = 1000; // 每页展示条数
      getschoollist(params)
        .then((res) => {
          if (res.data.code == 0) {
            that.schoolList = res.data.data.datalist;
          } else {
            that.$message({
              type: "success",
              message: res.data.msg,
            });
          }
        })
        .catch(() => {});
    },
    addChange() {
      this.addModel.item = Object.assign({}, defaultAddItem);
      this.addModel.flag = true;
    },
    editInfo(row) {
      this.addModel.item = Object.assign({}, row);
      this.addModel.flag = true;
    },
    addBtnTime() {
      if (this.checkedCities.length == 0) {
        getMessage(this, "星期几未选择");
      }
      console.log(this.searchKey.time, "如果爱情");
    },
    submitArea() {
      var that = this;
      var params = {};
      if (that.addModel.item.agentid) {
        params.agentid = that.addModel.item.agentid;
      }
      params.agentname = that.addModel.item.agentname;
      params.areacode = that.addModel.item.areacode;
      params.agenttype = that.addModel.item.agenttype;
      params.contactman = that.addModel.item.contactman;
      params.phone = that.addModel.item.phone;
      params.addr = that.addModel.item.addr;
      if (!params.agentname) {
        this.$message({
          type: "warning",
          message: "代理商名称不能为空！",
        });
        return false;
      }
      if (!params.areacode) {
        this.$message({
          type: "warning",
          message: "代理区域代码不能为空！",
        });
        return false;
      }
      if (!params.contactman) {
        this.$message({
          type: "warning",
          message: "联系人名称不能为空！",
        });
        return false;
      }
      if (!params.phone) {
        this.$message({
          type: "warning",
          message: "联系方式不能为空！",
        });
        return false;
      }
      if (!params.addr) {
        this.$message({
          type: "warning",
          message: "地址信息不能为空！",
        });
        return false;
      }
      var loginInit = that.$loading();
      if (params.agentid) {
        editagent(params)
          .then((res) => {
            loginInit.close();
            that.addModel.flag = false;
            if (res.data.code == 0) {
              that.$message({
                type: "success",
                message: "修改成功！",
              });
            } else {
              that.$message({
                type: "success",
                message: res.data.msg,
              });
            }
            that.onsearch();
          })
          .catch(() => {
            loginInit.close();
          });
      } else {
        addagent(params)
          .then((res) => {
            loginInit.close();
            that.addModel.flag = false;
            if (res.data.code == 0) {
              that.$message({
                type: "success",
                message: "新增成功！",
              });
            } else {
              that.$message({
                type: "success",
                message: res.data.msg,
              });
            }
            that.onsearch();
          })
          .catch(() => {
            loginInit.close();
          });
      }
    },
    // 删除
    delInfo(item) {
      this.$confirm("确定要删除此条记录吗？删除后不可恢复！", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const that = this;
        deletegatebarrierinfo([item.id])
          .then((res) => {
            if (res.data.code == 0) {
              that.$message({
                type: "success",
                message: "删除成功",
              });
            }
            that.onsearch();
          })
          .catch((error) => [
            that.$message({
              type: "warning",
              message: "删除失败",
            }),
          ]);
      });
    },
    onsearch() {
      this.page.currentPage = 1;
      this.onSubmit();
    },
    onSubmit() {
      var params = {};
      var that = this;
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.startdate = that.searchKey.time[0];
        params.enddate = that.searchKey.time[1];
      } else {
        params.startdate = "";
        params.enddate = "";
      }
      params.pageindex = that.page.currentPage; // 当前页数
      params.pagesize = that.page.pageSize; // 每页展示条数
      that.page.tableLoading = true;
      const options = Object.assign(params, this.searchKey);
      getGatebarrierinfolist(options)
        .then((res) => {
          that.page.tableLoading = false;
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist;
            that.page.totalRow = res.data.data.totalcount;
          } else {
            that.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          // that.searchData = res.data.data.datalist
          // that.page.totalRow = res.data.data.totalcount
          // that.page.totalPage = res.data.page.totalPageNum
          // that.page.pageSize = parseInt(res.data.page.pageNum)
        })
        .catch(() => {
          that.page.tableLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
}
.addbtn {
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #5793f8;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-top: 5px;
}
.el-table .el-button {
  display: inline-block;
  margin: 0 10px;
}
</style>
